<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">述职审核</div>
        </div>
        <el-form :inline="true" :model="dataFormSzbg" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="述职人名称">
            <el-input v-model="dataFormSzbg.szUserName" placeholder="请输入述职人名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" v-if="permissions.sysnorm_sysnorm_view" type="primary" class="marginLeft"
              @click="getDataList()">检索</el-button>
          </el-form-item>
        </el-form>

        <div class="avue-crud">
          <el-table :data="dataList" v-loading="dataListLoading" stripe height="60vh">
            <el-table-column prop="" label="序号" :formatter="nShowIndex" width="80px"></el-table-column>

            <el-table-column prop="fqUserName" label="发起人">
            </el-table-column>
            <el-table-column prop="szLx" label="述职类型">
            </el-table-column>
            <el-table-column prop="szDeptName" label="述职部门">
            </el-table-column>
            <el-table-column prop="szUserName" label="述职人">
            </el-table-column>
            <el-table-column prop="szJzDate" width="200px" :formatter="formater" label="述职截止时间">
            </el-table-column>
            <el-table-column prop="shUserName" label="审核人">
            </el-table-column>
            <el-table-column prop="shZt" label="审核状态">
            </el-table-column>
            <el-table-column prop="zhSm" show-overflow-tooltip align="center" label="审核说明">
            </el-table-column>
            <el-table-column prop="szbgFjmc" show-overflow-tooltip label="述职报告名称">
            </el-table-column>

            <el-table-column width="250" label="操作" >
              <template slot-scope="scope">
                <el-button type="primary" plain v-if="scope.row.shZt=='已退回' || scope.row.shZt=='审核中'"
                  @click="shOpen(scope.row.id,'已通过','通过')">通过</el-button>
                <el-button type="primary" plain v-if="scope.row.shZt=='审核中'" @click="shOpen(scope.row.id,'已退回','驳回')">驳回
                </el-button>
                <el-button v-if="scope.row.szbgFjdz" type="primary" plain
                  @click="handlePictureCardPreview(scope.row.szbgFjdz)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <el-dialog title="述职报告" :visible.sync="bgdialogVisible" width="90vw" top="3vh" append-to-body>
        <iframe :src="bgUrl" style="width: 100%;height:75vh"></iframe>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bgdialogVisible = false">取消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="qxBH"  :close-on-click-modal="false" append-to-body>
        <span>{{'填写'+shTitle+'说明'}}</span>
        <el-input type="textarea" v-model="dataFormSzbgSzbg.zhSm"></el-input>
        <span slot="footer" class="dialog-footer">
          
          <el-button type="primary" @click="tjsh">确 定</el-button>
          <el-button @click="qxBH">取 消</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
  import {
    shrFetchList,
    updateByShUserId

  } from '@/api/ceping/cepingszbgb'

  import store from '@/store'
  import {
    getPreview
  } from "@/util/util";
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        dataFormSzbgSzbg: {
          id: 0,
          shZt: '',
          zhSm: ''
        },
        bgdialogVisible: false,
        dataFormSzbg: {
          szUserName: '',
        },
        headers: {
          Authorization: 'Bearer ' + store.getters.access_token
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        bgUrl: '',
        dialogVisible: false,
        shTitle: ''
      }
    },
    components: {

    },
    created() {
      this.getDataList()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {

      /**
       * 审核
       */
      shOpen(id, zt, title) {
        var _this = this;
        _this.dataFormSzbgSzbg.id = id;
        _this.shTitle = title;
        this.$confirm('确认' + title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          _this.dataFormSzbgSzbg.shZt = zt;
          if (zt == '已通过') {
            updateByShUserId(_this.dataFormSzbgSzbg).then(res => {
              _this.$notify.success(_this.shTitle + '成功');
              _this.dialogVisible = false;
              _this.getDataList()
            });
          }else{
            _this.dialogVisible = true;
          }

        });
      },

      formater(row, column, cellValue, index) {
        if (cellValue) {
          return this.$moment(cellValue).format("yyyy-MM-DD HH:mm");
        } else {
          return cellValue;
        }
      },
      /**
       * 取消驳回
       */
      qxBH() {
        this.dialogVisible = false;
        this.dataFormSzbgSzbg.shZt = '';
        this.dataFormSzbgSzbg.zhSm = '';
        this.dataFormSzbgSzbg.id = 0;
      },
      /**
       * 提交驳回
       */
      tjsh() {
        if (this.dataFormSzbgSzbg.zhSm == '') {
          this.$notify.error('请填写审核说明');
          return
        }else if(this.dataFormSzbgSzbg.zhSm.length>300){
          this.$notify.error('说明不得超过300字符');
          return
        }
        updateByShUserId(this.dataFormSzbgSzbg).then(res => {
          this.$notify.success(this.shTitle + '成功');
          this.dialogVisible = false;
          this.getDataList()
        });
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        shrFetchList(Object.assign({
          current: this.pageIndex,
          size: this.pageSize
        }, this.dataFormSzbg)).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },

      nShowIndex(row, column, cellValue, index) {
        return index + 1;
      },


      /**
       * 文件预览预留
       */
      handlePictureCardPreview(url) {
        if (url) {
          this.bgUrl = getPreview(url) + "&officePreviewType=pdf";
          this.bgdialogVisible = true;
        } else {
          this.$notify.closeAll();
          this.$notify.error('还未上传附件');
        }

      },

    }
  }

</script>
